<template>
  <div class="footer">
    <van-tabbar v-model="active" :route="true" :border="false">
      <van-tabbar-item
        :to="item.to_url"
        v-for="item in footer_list"
        :key="item.title"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.url2 : item.url" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const active = ref(0);
    const footer_list = [
      {
        title: "首页",
        url2: require("../../assets/img/mine/首页2.png"),
        url: require("../../assets/img/mine/首页.png"),
        to_url: "/home/index",
      },
      {
        title: "问答",
        url: require("../../assets/img/mine/问答.png"),
        url2: require("../../assets/img/mine/问答2.png"),
        to_url: "/home/questions",
      },
      {
        title: "咨询",
        url: require("../../assets/img/mine/咨询.png"),
        url2: require("../../assets/img/mine/咨询2.png"),
        to_url: "/home/consult",
      },
      {
        title: "消息",
        url: require("../../assets/img/mine/消息.png"),
        url2: require("../../assets/img/mine/消息2.png"),
        to_url: "/home/message",
      },
      {
        title: "我的",
        url: require("../../assets/img/mine/我的.png"),
        url2: require("../../assets/img/mine/我的2.png"),
        to_url: "/home/mine",
      },
    ];

    return {
      footer_list,
      active,
    };
  },
};
</script>

<style lang="less">
.flex() {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.van-tabbar--fixed {
  bottom: 20px;
}
.footer {
  z-index: 10;
  width: 100%;
  height: 86px;
  box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0px;
  bottom: 0px;
  background: #fff;
  .footer-list {
    display: flex;
    .f-item {
      .flex();
      flex: 1;
      .icon {
        height: 24px;
        width: 24px;
        margin-top: 16px;
        margin-bottom: 3px;
      }
      .text {
        font-size: 9px;
      }
    }
  }
}
</style>
